
<style scoped>
.handle-box {
    margin-bottom: 20px;
}
</style>
<!-- tsx -->
<template>
  <div class="package">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-tickets"></i> 收 支 明 细 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input clearable v-model="query.mobile" style="width:200px;margin:0 20px 0 0" placeholder="会员账号" class="handle-input mr10"></el-input>
                <el-button type="primary" @click="getList">搜索</el-button>
                        <el-button type="warning"  @click="searchDetail({})">充值</el-button>
                        <el-button size="mini" type="danger"  @click="deleteDetail({})">扣费</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column prop="" label="头像" align="center">
                    <template slot-scope="scope">
                        <el-image style="width: 50px; height: 50px" :src="scope.row.wechatInfo.avatarUrl" :preview-src-list="[scope.row.portrait]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickName" label="昵称" width="100" align="center">
                    <template slot-scope="scope">
                    {{ scope.row.wechatInfo.nickName }}
                  </template>
                </el-table-column>
                <el-table-column prop="mobile" label="会员账号" width="150" align="center"></el-table-column>
                <el-table-column prop="openid" label="会员id" width="150" align="center"></el-table-column>
                <el-table-column prop="fundTypeName" label="收支类型"  align="center">
                  <!-- <template slot-scope="scope">
                    <span v-if="scope.row.accountTypeName == 10" style="color:#ed1941">支出</span>
                    <span v-if="scope.row.accountTypeName == 20" style="color:#45b97c">收入</span>
                  </template> -->
                </el-table-column>
                <el-table-column prop="accountTypeName" label="账户类型"  align="center">
                  <!-- <template slot-scope="scope">
                    <span v-if="scope.row.fundTypeName == 10" >冻结</span>
                    <span v-if="scope.row.fundTypeName == 20" >余额</span>
                    <span v-if="scope.row.fundTypeName == 30" >购物券</span>
                  </template> -->
                </el-table-column>
                <el-table-column prop="payBalance" label="交易金额" width="100" align="center"></el-table-column>
                <el-table-column prop="beforeBalance" label="交易前金额" width="100"  align="center"></el-table-column>
                <el-table-column prop="afterBalance" label="交易后金额" width="100"  align="center"></el-table-column>
                <el-table-column prop="createdOn" label="时间" width="200"  align="center"></el-table-column>
                <el-table-column label="操作" width="150" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="warning"  @click="searchDetail(scope.row)">充值</el-button>
                        <el-button size="mini" type="danger"  @click="deleteDetail(scope.row)">扣费</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="sizeChange"
                    @current-change="pageChange"
                    :current-page="query.pageIndex"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog title="充值" :visible.sync="senInfoShow" width="40%">
            <el-form ref="send" :model="senInfo" label-width="100px">
                <el-form-item label="会员ID:">
                    <el-input v-model="senInfo.mobile" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="账户类别:">
                <el-select clearable v-model="senInfo.fundType" style="width:400px" placeholder="账户类别" class="handle-select mr10">
                    <el-option key="1" label="余额" :value="10"></el-option>
                    <el-option key="2" label="购物券" :value="20"></el-option>
                    <!-- <el-option key="3" label="互助" :value="30"></el-option> -->
                </el-select>
                </el-form-item>
                <el-form-item label="金额/数量:">
                    <el-input v-model="senInfo.amount" style="width:400px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="senInfoShow = false">取 消</el-button>
                <el-button type="primary" @click="sureSend">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="扣费" :visible.sync="senInfoShow2" width="40%">
            <el-form ref="send" :model="senInfo2" label-width="100px">
                <el-form-item label="会员ID:">
                    <el-input v-model="senInfo2.mobile" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="账户类别:">
                <el-select clearable v-model="senInfo2.fundType" style="width:400px" placeholder="账户类别" class="handle-select mr10">
                    <el-option key="1" label="余额" :value="10"></el-option>
                    <el-option key="2" label="购物券" :value="20"></el-option>
                    <!-- <el-option key="3" label="互助" :value="30"></el-option> -->
                </el-select>
                </el-form-item>
                <el-form-item label="金额/数量:">
                    <el-input v-model="senInfo2.amount" style="width:400px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="senInfoShow2 = false">取 消</el-button>
                <el-button type="primary" @click="sureSend2">确 定</el-button>
            </span>
        </el-dialog>
  </div>
</template>

<script >
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { PagingBalanceDetail,Recharge,Deduction } from '@/api/vip';
export default {
// import引入的组件需要注入到对象中才能使用
components: {},
data() {
 // 这里存放数据
  return {
    query:{
      pageIndex:1,
      pageSize:20,
      mobile:''
    },
    senInfo:{
        amount:''
    },
    senInfo2:{
        amount:''
    },
    senInfoShow2:false,
    senInfoShow:false,
      tableData:[],
      pageTotal:0
  }
},
// 过滤器
filters: {
},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
    pageChange(e){
        this.query.pageIndex = e
        this.getList()
    },
  getList() {
    PagingBalanceDetail(this.query).then(res => {
      this.tableData = res.Data.list
                this.pageTotal = res.Data.paging.totalItemCount;
    })
  },
  sizeChange(e) {
    this.query.pageSize = e
    this.getList()
  },
  searchDetail(info){
    //   console.log(info)
      this.senInfo = JSON.parse(JSON.stringify(info))
      this.senInfoShow = true
  },
  deleteDetail(info) {
      this.senInfo2 = JSON.parse(JSON.stringify(info))
      this.senInfoShow2 = true
  },
  sureSend2(){
      Deduction(this.senInfo2).then(res => {
        //   console.log(res)
          if(res.RequestStatus == 200){
              this.$message.success('成功')
              this.getList()
      this.senInfoShow2 = false
            }
      })
  },
  sureSend(){
      Recharge(this.senInfo).then(res => {
          if(res.RequestStatus == 200){
              this.$message.success('成功')
              this.getList()
      this.senInfoShow = false
            }
      })
  }
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {
  console.log(123)
  this.getList()
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>